<template>
  <scroll-view class="preview" :scroll-y="true">
    <div class="preview-phone" v-if="iframeUrl">
      <iframe :src="iframeUrl" class="preview-phone-container" />
    </div>
  </scroll-view>
</template>

<script>
export default {
  name: "index",
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    iframeUrl({ pageData }) {
      return `${process.env.VUE_APP_PREVIEW_URL}?pageId=${
        pageData.page_id
      }&isPreview=${true}`;
    },
  },
  data() {
    return {
      componentsList: this.$store.state.page.page.items,
      headerIcon: require("@/static/widget/header.png"),
      settingIcon: require("@/static/widget/setting.png"),
    };
  },
  watch: {
    components(val) {
      this.componentsList = Object.assign([], val);
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
$deviceWidth: 378px;
.preview {
  background-color: white;
  overflow: hidden;
  overflow-y: scroll;
  height: 88vh;
  &-phone {
    width: $deviceWidth;
    display: flex;
    justify-content: center;
    margin: 0;
    box-sizing: border-box;
    padding: 0 13px 10px 13px;
    background-color: whitesmoke;
    min-height: 88vh;
    overflow: hidden;
    overflow-y: scroll;
    &-container {
      width: 100%;
      box-sizing: border-box;
      border: none;
    }
  }
}
</style>
